const WindowResize = (NodeVue) => {
  const node = NodeVue.$el;
  const resizers = node.querySelectorAll(`.resizer`);
  const el = node;
  let currentResizer;
  resizers.forEach(resizer => {
    resizer.addEventListener("mousedown", mouseDown);
    function mouseDown(e) {
      currentResizer = e.target;
      let prevX = e.clientX;
      let prevY = e.clientY;

      window.addEventListener("mousemove", mouseMove);
      window.addEventListener("mouseup", mouseUp);
      function mouseMove(e) {
        el.style.opacity = 0.7;
        // el.querySelector(".content").style.display = "none";
        // getBoundingClientRect 是一个用于获取元素在视口（viewport）中位置和尺寸信息的方法。
        // 它返回一个 DOMRect 对象，包含长宽高和 距离窗口右边距离 距离窗口左边距离
        const rect = el.getBoundingClientRect();

        if (currentResizer.classList.contains("se")) {
          const width = rect.width - (prevX - e.clientX);
          const height = rect.height - (prevY - e.clientY);
          if (width > 700) {
            el.style.width = width + "px";
            NodeVue.width = width;
          }
          if (height > 500) {
            el.style.height = height + "px";
            NodeVue.height = height;
          }
        }
        prevX = e.clientX;
        prevY = e.clientY;
      }
      function mouseUp() {
        el.style.opacity = "1";
        // el.querySelector(".content").style.display = "block";
        window.removeEventListener("mousemove", mouseMove);
        window.removeEventListener("mouseup", mouseUp);
      }
    }
  });
}

export default WindowResize;
